<template>
  <div style="width: 100%">
    <el-form
      label-position="left"
      label-width="100px"
      @submit.prevent
      style="width: 95%"
    >
      <el-radio-group label="label position">
        <el-text>基础资料</el-text>
      </el-radio-group>
      <el-divider style="margin: 0" />
      <el-form-item></el-form-item>
      <el-form-item label="设置头像">
        <el-input
          v-model="config.avatar"
          placeholder="可直接输入QQ号"
          type="text"
        />
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="config.nickname" placeholder="昵称" />
      </el-form-item>
      <el-form-item label="主页设置">
        <MdEditor
          editorId="userSetup"
          :preview="!set.ismobile"
          v-model="config.signature"
          @onUploadImg="UploadImage"
        />
      </el-form-item>

      <el-form-item label="背景图片">
        <el-row>
          <el-col :span="24">
            <el-input
              drag
              v-model="config.background"
              placeholder="输入图片地址或上传"
            />
          </el-col>
          <el-col :span="10" style="display: flex">
            <el-upload
              :action="uploadFileSrc"
              v-model="config.background"
              :with-credentials="true"
              :show-file-list="false"
              :on-success="uploadCover"
              :on-progress="uploadProgress"
              :on-error="uploadError"
              accept="image/png, image/jpeg"
            >
              <el-button type="primary">上传</el-button>
            </el-upload>

            <el-button
              @click="
                config.background =
                  'https://pic.imgdb.cn/item/64eb64df661c6c8e549e1ce8.png'
              "
            >
              使用默认
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="">
        <el-button @click="edit"> 提交 </el-button>
      </el-form-item>
    </el-form>

    <el-form
      label-position="left"
      label-width="100px"
      @submit.prevent
      style="width: 95%"
    >
      <el-radio-group label="label position">
        <el-text>账号安全</el-text>
      </el-radio-group>
      <el-divider style="margin: 0" />
      <el-form-item></el-form-item>
      <el-form-item>
        <el-button @click="page = true">重置密码</el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-dialog v-model="page" :draggable="true" :fullscreen="set.ismobile">
    <UserLogin :page="true" @childEvent="offdialog" />
  </el-dialog>
</template>

<script lang="ts">
import { api } from '@/apitypes'
import Cfg from '@/config/config.ts'
import Method from '@/globalmethods.ts'
import { ElMessage } from 'element-plus'
import UserLogin from '@comps/user/login.vue'
import { MdEditor } from 'md-editor-v3'
export default {
  name: 'UserSetup',
  components: {
    UserLogin,
    MdEditor,
  },
  data() {
    return {
      page: false,
      ...Cfg,
      config: {
        nickname: '',
        signature: Cfg.userInfo.data.signature,
        avatar: Cfg.userInfo.data.headurl,
        background: '',
      },
      uploadFileSrc: `${Cfg.config.server}/Upload/Upload`,
    }
  },
  methods: {
    /**
     * 上传图片
     */
    async UploadImage(file: any) {
      let url = await Method.UploadImage(file, false)
      console.log(url)
      this.config.signature += url
    },
    uploadError() {
      ElMessage({
        type: 'error',
        message: '上传失败',
      })
    },
    uploadProgress() {
      ElMessage('上传中')
    },
    uploadCover(e: any) {
      this.config.background = e.data.src
      ElMessage({
        type: 'success',
        message: '上传成功',
      })
    },
    offdialog() {
      this.page = false
    },
    edit() {
      if (this.config.avatar && /^[0-9]+$/.test(this.config.avatar)) {
        this.config.avatar = `http://q.qlogo.cn/headimg_dl?dst_uin=${this.config.avatar}&spec=640`
      } else {
        this.config.avatar = Cfg.userInfo.data.headurl as string
      }
      Method.api_post('/user/edit', this.config)
        .then((res) => {
          let obj = res.data as api
          if (obj.code == 200) {
            ElMessage({
              type: 'success',
              message: '设置成功',
            })
            Method.getInformation()
          } else {
            ElMessage({
              type: 'error',
              message: obj.msg,
            })
          }
        })
        .catch((err) => {
          console.log(err)
          ElMessage({
            type: 'error',
            message: '请求错误：' + err.message,
          })
        })
    },
  },
}
</script>

<style scoped>
.el-input {
  flex: 1;
}
.el-form {
  background-color: hsl(var(--b1));
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--rounded-card);
  padding: 10px;
  margin: 5px;
}
</style>
